import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import Avatars from '../../../component/avatars'
import { DatePicker, Checkbox, Table, Button, Modal, Form, Input } from "antd"
import { TopIcon, BottomIcon } from '../../../utils/icons';
import { data } from "./data"
import dayjs from 'dayjs'
import { UserIcon } from '../../../utils/icons';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

function timesChange(timestamp) {
    var date = new Date(timestamp);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ');
    return Y + M + D;
}


export default function Friend() {
    const languages = useSelector((state) => state).publicReducer.language
    const [form] = Form.useForm();

    const times = timesChange(new Date())
    console.log(times)

    const onChange = (date, dateString) => {
        console.log(date, dateString);
    };
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const onFinish = (values) => {
        console.log('Success:', values);
        setIsModalOpen(false);
        form.resetFields();
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const [check1, setCheck1] = useState(true)
    const [check2, setCheck2] = useState(false)
    const [check3, setCheck3] = useState(false)
    const change1 = (e) => {
        console.log(e.target.checked)
        setCheck1(true)
        setCheck2(false)
        setCheck3(false)
    }
    const change2 = (e) => {
        console.log(e.target.checked)
        setCheck1(false)
        setCheck2(true)
        setCheck3(false)
    }
    const change3 = (e) => {
        console.log(e.target.checked)
        setCheck1(false)
        setCheck2(false)
        setCheck3(true)
    }

    const dateFormat = 'YYYY.MM.DD';
    const username = useSelector((state) => state.userReducer.user.username)

    const columns = [
        {
            title: languages === 'Korean' ? "이름" : languages === "English" ? 'full name' : '姓名',
            key: '이름',
            align: "center",
            dataIndex: '이름',
        },
        {
            title: languages === 'Korean' ? "전화번호" : languages === "English" ? 'Telephone number' : '电话号码',
            align: "center",
            dataIndex: '전화번호',
            key: '전화번호',
        },
        {
            title: languages === 'Korean' ? "총수익금" : languages === "English" ? 'Total income' : '总收益',
            align: "center",
            dataIndex: '총수익금',
            key: '총수익금',
            render: (row) => "₩" + row
        },
        {
            title: languages === 'Korean' ? "총수수료" : languages === "English" ? 'Total service charge' : '总手续费',
            align: "center",
            dataIndex: '총수수료',
            key: '총수수료',
            render: (row) => "₩" + row
        },
        {
            title: languages === 'Korean' ? "할인율" : languages === "English" ? 'Discount rate' : '折扣率',
            align: "center",
            dataIndex: '할인율',
            key: '할인율',
            render: (row) => <div className='discount_rate'><i>{row >= "1%" ? <TopIcon /> : <BottomIcon />}</i><span>{row.split("-").join(" ")}</span></div>
        },
        {
            title: languages === 'Korean' ? "확정수수료" : languages === "English" ? 'Determine service charge' : '确定手续费',
            align: "center",
            dataIndex: '확정수수료',
            key: '확정수수료',
            render: (row) => "₩" + row
        },
        {
            title: languages === 'Korean' ? "레벨" : languages === "English" ? 'Grade' : '等级',
            align: "center",
            dataIndex: '레벨',
            key: '레벨',
        },
        {
            title: languages === 'Korean' ? "레벨할인율" : languages === "English" ? 'Grade discount rate' : '等级折扣率',
            align: "center",
            dataIndex: '레벨할인율',
            key: '레벨할인율',
        },
        {
            title: languages === 'Korean' ? "년별" : languages === "English" ? 'My income' : '我的收入',
            align: "center",
            dataIndex: 'My수익',
            key: 'My수익',
            render: (row) => "₩" + row
        },
    ]
    return (
        <div className='friend'>
            <div className='nav'>
                <Avatars username={username} level="Lv.99" coupon={languages === "Korean" ? "쿠폰 잔액" : (languages === "Chinese" ? "可用优惠券" : "Coupon Balance")} balance="8,888,888" icon={<UserIcon />} />
            </div>
            <div className='main'>
                <div className='date'>
                    <div className='checkbox'>
                        <Checkbox onChange={change1} checked={check1} /><i>{languages === 'Korean' ? "일별" : languages === "English" ? 'everyday' : '每日'}</i>
                        <DatePicker onChange={onChange} size="large" defaultValue={dayjs(times, dateFormat)} format={dateFormat} />
                        <Checkbox onChange={change2} checked={check2} /><i>{languages === 'Korean' ? "월별" : languages === "English" ? 'monthly' : '每月'}</i>
                        <Checkbox onChange={change3} checked={check3} /><i>{languages === 'Korean' ? "년별" : languages === "English" ? 'Yearly' : '每年'}</i>
                    </div>
                    <Button onClick={showModal}>{languages === 'Korean' ? "수수료 설정" : languages === "English" ? 'Setup fee' : '设置费用'}</Button>
                </div>
                <Table size='small' columns={columns} dataSource={data} pagination={false} />
                <h4><span>{languages === 'Korean' ? "더보기" : languages === "English" ? 'more' : '更多'}</span></h4>
            </div>

            <Modal className='modal_friend' title={languages === 'Korean' ? "수수료 설정" : languages === "English" ? 'Expense settings' : '费用设置'} open={isModalOpen} onCancel={handleCancel} onOk={handleOk} footer={null} centered>
                <hgroup>{languages === 'Korean' ? "MY 수수료 할인율 : 30%" : languages === "English" ? 'MY commission discount rate: 30%' : 'MY手续费折扣率：30%'}</hgroup>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 11,
                    }}
                    initialValues={{}}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off">
                    <section>{languages === "Korean" ? "My수수료수익" : (languages === "Chinese" ? "我的手续费收益" : "My commission income Balance")}</section>
                    <Form.Item
                        name="My수수료수익"
                        rules={[{
                            required: true,
                            message: 'Please input your My수수료수익 !',
                        },]}>
                        <Input /><span>%</span>
                    </Form.Item>

                    <section>{languages === "Korean" ? "친구할인" : (languages === "Chinese" ? "朋友折扣" : "Friend discount")}</section>
                    <Form.Item
                        name="친구할인"
                        rules={[{
                            required: true,
                            message: 'Please input your 친구할인 !',
                        },]}>
                        <Input /><span>%</span>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 2,
                        }}>
                        <Button onClick={handleCancel}>{languages === 'Korean' ? "취소" : languages === "English" ? 'cancel' : '取消'}</Button>
                        <Button htmlType="submit">
                            {languages === 'Korean' ? "수정" : languages === "English" ? 'modify' : '修改'}
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
